<template>
  <div id="testPaper">
    <div class="testPaperBox">
      <Splitpanes class="area">
        <Pane size="40">
          <div style="color: red">{{ '(' + paperInfo.testCode + ')' + paperInfo.testTitle }}<br /></div>
          <div style="color: red">按住头部移动！！！！！！！！！！！！！！！</div>
          <div style="color: blue">按住左边距拖动！！！！！！！！！！！！！！！</div>
          <div style="color: red">按住右边距拖动！！！！！！！！！！！！！！！</div>
          <div style="color: blue">按住底边距拖动！！！！！！！！！！！！！！！</div>
          <div style="color: blue">按住左下角拖动 ！！！！！！！！！！！！！！！</div>
          <div style="color: blue">按住右下角拖动！！！！！！！！！！！！！！！</div>
        </Pane>
        <Pane size="60"> </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, defineExpose, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { Splitpanes, Pane } from 'splitpanes';

defineExpose({ getPaperVie });

let { proxy }: any = getCurrentInstance();
let paperInfo = reactive({
  id: '',
  testCode: '',
  testTitle: '',
  startDate: '',
  endDate: '',
  totalScore: '',
  status: 0,
  seq: 0,
  sysUserList: [],
  remake: '',
  wkTestBigList: []
});
// 方法定义区 =============================================================
onMounted(() => {});

// 试卷信息
function getPaperVie(currenPaperInfo: any) {
  const url = '/wk/test/paper/getPaperView';
  proxy.$http
    .get(url, { params: { paperId: currenPaperInfo.id } })
    .then((res: any) => {
      if (res.status.code === 1) {
        Object.assign(paperInfo, res.data);
      } else {
        VxeMessage('查询失败', VxeNotifyType.error);
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
</script>

<style lang="scss" scoped>
#testPaper {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .testPaperBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        height: 100%;
        :deep(.el-tabs__content) {
          height: calc(100% - 39px - 30px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            .el-form {
              position: relative;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
